import React, { Component } from 'react'
import { Card, Button, Icon, Radio } from 'antd'
import './ui.less'
class Buttons extends Component {
  state = {
    loading: true,
    size: 'default'
  }
  closeLoading = () => {
    this.setState({
      loading: false
    })
  }
  handleChange = e => {
    this.setState({
      size: e.target.value
    })
  }
  render() {
    return (
      <div>
        <Card title="基础按钮" className="card-wrap" >
          <Button type="primary" className="btn-margin">
            Imooc
          </Button>
          <Button className="btn-margin">Imooc</Button>
          <Button type="dashed" className="btn-margin">
            Imooc
          </Button>
          <Button type="danger" className="btn-margin">
            Imooc
          </Button>
          <Button disabled className="btn-margin">
            Imooc
          </Button>
        </Card>
        <Card className="card-wrap" title="图形按钮">
          <Button icon="plus" className="btn-margin">
            创建
          </Button>
          <Button icon="edit" className="btn-margin">
            编辑
          </Button>
          <Button icon="delete" className="btn-margin">
            删除
          </Button>
          <Button shape="circle" icon="search" className="btn-margin" />
          <Button icon="search" type="primary" className="btn-margin">
            搜索
          </Button>
          <Button icon="download" type="primary" className="btn-margin">
            下载
          </Button>
        </Card>
        <Card className="card-wrap" title="Loading按钮">
          <Button
            loading={this.state.loading}
            type="primary"
            className="btn-margin"
          >
            确定
          </Button>
          <Button
            shape="circle"
            loading={this.state.loading}
            type="primary"
            className="btn-margin"
          />
          <Button loading={this.state.loading} className="btn-margin">
            点击加载
          </Button>
          <Button
            loading={this.state.loading}
            shape="circle"
            className="btn-margin"
          />
          <Button type="primary" onClick={this.closeLoading}>
            关闭
          </Button>
        </Card>
        <Card className="card-wrap" title="按钮组">
          <Button.Group>
            <Button type="primary" icon="left">
              prev
            </Button>
            <Button type="primary">
              next
              <Icon type="right" />
            </Button>
          </Button.Group>
        </Card>
        <Card className="card-wrap" title="按钮尺寸">
          <Radio.Group value={this.state.size} onChange={this.handleChange}>
            <Radio value="small">小</Radio>
            <Radio value="default">中</Radio>
            <Radio value="large">大</Radio>
          </Radio.Group>
          <Button size={this.state.size} type="primary" className="btn-margin">
            Imooc
          </Button>
          <Button size={this.state.size} className="btn-margin">Imooc</Button>
          <Button size={this.state.size} type="dashed" className="btn-margin">
            Imooc
          </Button>
          <Button size={this.state.size} type="danger" className="btn-margin">
            Imooc
          </Button>
        </Card>
      </div>
    )
  }
}

export default Buttons
